* {
    margin: 0;
    padding: 0;
    outline: none;
}

body {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;    
}

// 手机rem响应式

$defaultSize: 37.5px !default;

@function rem($px) {
    @return $px / $defaultSize * 1rem;
}

// html {
//     font-size: 10vw;
//     font-family: "微软雅黑";
// }

$colors: (
    "white": #fff,
    "f1f": #F1F1F1,
    "f2f": #F2F2F2,
    "f7f": #F7F7F7,
    "fef": #FEFEFE,
    "ccc": #CCCCCC,
    "999": #999,
    "333": #333,
    "212": #212121,
    "yellow": #FFC107,
    "blue": #004B97,
);

@each $colorKey, $color in $colors {
    .color-#{$colorKey} {
        color: $color; 
    }
    .bg-#{$colorKey} {
        background: $color;
    }
}

ul li {
    list-style: none;
}


a {
    color: #333;
    text-decoration: none;
    
    /* 未访问的链接*/
    &:link {
        text-decoration: none;
    }
    
    /*已经访问过的链接*/
    &:visited {
        text-decoration: none;
    }
    
    /*鼠标划过(停留)的链接*/
    &:hover {
      text-decoration: none;
    }
  
    &:active {
      text-decoration: none;
    }
  
  }

.w-100 {
    width: 100%;
}

.d-flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.f-wrap {
    flex-wrap: wrap;
}

$flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around
);
  
$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch
);

@each $jcKey, $jc in $flex-jc {
    .j-#{$jcKey} {
        justify-content: $jc;
    }
}

@each $aiKey, $ai in $flex-ai {
    .a-#{$aiKey} {
        align-items: $ai;
    }
}

.text-center {
    text-align: center;
}

$spacing-types: (
  m: margin,
  p: padding
);

$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left
);

$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3,
);

$spacing-base-size: 1rem;

@each $typeKey, $type in $spacing-types {
    @each $directionsKey, $directions in $spacing-directions {
        @each $sizeKey, $size in $spacing-sizes {
            .#{$typeKey}#{$directionsKey}-#{$sizeKey} {
                #{$type}-#{$directions}: $size * $spacing-base-size
            }
        }
    }
}

$font-sizes: (
    "12": 12,
    "14": 14,
    "16": 16,
    "18": 18,
    "22": 22,
    "24": 24,
    "30": 30,
    "34": 34,
    "36": 36,
    "38": 38,
    "48": 48,
);

@each $key, $val in $font-sizes {
    .fs-#{$key} {
        font-size: $val * 1px;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 16px;
    }
    @each $key, $val in $font-sizes {
        .fs-#{$key} {
            font-size: $val / 32  * 1rem;
        }
    }
    @each $typeKey, $type in $spacing-types {
    @each $directionsKey, $directions in $spacing-directions {
        @each $sizeKey, $size in $spacing-sizes {
            .#{$typeKey}#{$directionsKey}-#{$sizeKey} {
                #{$type}-#{$directions}: $size * 0.625 * $spacing-base-size !important;
            }
        }
    }
}
};

.container-fluid {
    padding: 0 !important;
    max-width: 100vw;
    overflow: hidden;
}